<template>
<!-- <el-button @click="jump">跳转</el-button>-->
<!--<h1>当前账户：{{username}}    网名：{{name}}</h1>-->
<!--  编辑主题区-->
  <div class="container">
    <div class="moment-edit-head">
      <textarea class="moment-text"  @focus="showDom" placeholder="说点儿什么吧" v-model="now_edit_works" ></textarea>

      <!--     文件上传模块-->
      <div class="fileDiv">
        <span>选择文件</span>
          <input type="file" :onchange="uploadPic">
<!--        <input  class="upload" type="file" name="file" value="上传图片"  onchange="previewFile()">-->
      </div>
      <img src="" height="100" width="100" alt="Image preview..."  />

      <el-button type="primary" @click="publish"  v-if="show1">发表</el-button>
    </div>
    <!--上传图片区-->
<!--    <div class="image-upload">
      <ImageUploadComponent v-if="show2" ></ImageUploadComponent>
    </div>-->
    <!--  朋友圈刷新区-->
    <div v-for="i in num" :key="i" class="main-body">
      <ChatMoments :user-name="username" :name='name' :moment="now_works_array[i-1]"   :comment="comment_array" :like="like_array" :now-edit-name="this.name" ></ChatMoments>
      <h1><br></h1>
    </div>
    <!--  朋友圈展示区-->
    <div v-for="i in arrayLength" :key="i" class="main-body">
      <ChatMoments  :user-name="userName_array[i-1]" :works-id="worksId_array[i-1]" :name='name_array[i-1]' :moment="moment_array[i-1]" :image-url="imageUrl_array[1]" :comment="comment_array" :like="like_array" :now-edit-name="this.name" :login_username="username " :login_name="name" ></ChatMoments>
      <h1><br></h1>

    </div>
  </div>


</template>
<script>
 import ChatMoments from "@/components/ChatMoments";

 import axios from "axios";
 import ImageUploadComponent from "@/components/ImageUploadComponent";

 export  default {
   components: { ChatMoments},

   data(){
     return{
       //该页面使用的参数列表
       username:"",
       name:"",
       now_edit_works:'',
       now_works_array:[],
       num:'',
       show1:false,
       imageName:"",
       //组件刷新参数列表

       //传给组件的参数列表
       worksData:[
       ],
       worksId_array:[],
       userName_array:[],
       name_array:["1","2"],
       moment_array:[],
       imageUrl_array:[],
       like_array:[],
       comment_array:[],
       arrayLength:"",
       //控制刷新
       isRouterAlive: true
     }
   },
   methods:{
     jump(){
       window.open('https://www.baidu.com/', '_blank')
     },
     showDom(){
       this.show1=true

     },
     uploadPic (e) {  // 上传照片
       let file = e.target.files[0]
       console.log({data:file})
       const _this=this;

       let param = new FormData() // 创建form对象
//注意files是对应后台的参数名哦
       param.append('file', file) // 通过append向form对象添加数据
       //console.log(param);                                 // 添加form表单中其他数据
       console.log(param.get('file').name) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
       _this.imageName=param.get('file').name
       // 添加请求头
       axios.post('http://localhost:8081/upload',param,{
         'Content-type' : 'multipart/form-data'
       })
           .then(response => {
             console.log(response.data)
             if (response.data.code === 0) {
               console.log(response.data)
             }

           })
       // 预览图片
       console.log("数值改变")
       var preview = document.querySelector('img');
       console.log(preview.height)
       // var file  = document.querySelector('input[type=file]').files[0];
       var reader = new FileReader();
       reader.onloadend = function () {
         preview.src = reader.result;
       }
       if (file) {
         reader.readAsDataURL(file);
         console.log("预览成功")
       } else {
         preview.src = "";
         console.log("预览失败")
       }

     },
    publish(){
      const _this=this;
    //  window.open("http://www.baidu.com/", "_search");
      this.num++
      this.now_works_array.push(this.now_edit_works)
      // alert(this.now_works_array)
      axios({
        method: 'post',
        url: 'http://localhost:8081/publishWorks',
        params: {
          userName:this.username,
          name:this.name,
          works:this.now_edit_works,
          imageUrl:_this.imageName
        }
      })
          .then(function (response) {

            console.log(response.data); // 前台调试能够看到获取到数据了

          })
          .catch(function (error) {
            console.log(error);
          });


    }},
   created() {
     const _this = this//将全局变量赋值到局部
     //获取登录界面传来的参数
     console.log(this.$route.query.username)
     this.username=this.$route.query.username

     //根据username查询用户信息
     axios({
       method: 'post',
       url: 'http://localhost:8081/showUserByAdmin',
       params: {
              userName:this.username
       }
     })
         .then(function (response) {

           console.log(response.data); // 前台调试能够看到获取到数据了
            _this.name=response.data.at(0).name;
            // alert(_this.name)

         })
         .catch(function (error) {
           console.log(error);
         });


     //获取后端所以like信息
     axios({
       method: 'post',
       url: 'http://localhost:8081/showLike',
       params: {
         userName:this.username
       }
     })
         .then(function (response) {
           console.log(response.data); // 前台调试能够看到获取到数据了
           for (let j = 0; j <response.data.length; j++) {
             _this.like_array[j]=  response.data.at(j)

           }

         })
         .catch(function (error) {
           console.log(error);
         });
     //获取后端评论的数据
     axios({
       method: 'post',
       url: 'http://localhost:8081/showComment',
       params: {

       }
     })
         .then(function (response) {

           console.log(response.data); // 前台调试能够看到获取到数据了

             for (let j = 0; j <response.data.length; j++) {
               _this.comment_array[j]=  response.data.at(j)

               }

         })
         .catch(function (error) {
           console.log(error);
         });

     //获取后端作品的数据
     axios({
       method: 'post',
       url: 'http://localhost:8081/showAllWorks',
       params: {}
     })
         .then(function (response) {

           console.log(response.data); // 前台调试能够看到获取到数据了
           _this.worksData = response.data
           _this.arrayLength = response.data.length
           for (let i = 0; i < response.data.length; i++) {
             _this.userName_array[i]=response.data.at(i).userName
             _this.name_array[i] = _this.worksData.at(i).name
             _this.moment_array[i] = response.data.at(i).works
             _this.worksId_array[i] = response.data.at(i).worksId
             _this.imageUrl_array[i] = response.data.at(i).imageUrl
             // alert(_this.imageUrl_array[i])
           }
            console.log(_this.imageUrl_array[1])

         })
         .catch(function (error) {
           console.log(error);
         });
   }

 }
</script>
<style>
.main-body{
  /* 给父盒子设置相对定位 */
  position: relative;
  width: 500px;

  /* 让父盒子水平居中 */
  margin: 0 auto;

}
.fileDiv{
  width: 100px;
  height: 40px;
  background-color: #00a2d4;
  line-height: 40px;
  text-align: center;
  color: #FFF;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.fileDiv input{
  width: 100px;
  height: 40px;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
}
.moment-text{
  margin-left: 100px;
  width: 600px;
  height: 100px;
  resize: none;
}
.moment-edit-head{
  width: 800px;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  margin: 0 auto;
  /*水平居中*/
}
.image-upload{
  width: 500px;
  position: relative;
  margin: 0 auto;
}
.container{
  background-color: #E9E9E9;
}
</style>